import router, { asyncRoutes } from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie

import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/404'] // no redirect whitelist
//  跳转前
//  只要路由值发生改变 就会路由触发钩子函数
router.beforeEach(async(to, from, next) => {
  console.log('跳转前')
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken() // 获取token
  // next()
  if (hasToken) {
    //  表示有token
    if (to.path === '/login') {
      //  表示：既有token又去的是login ====不能让你去，直接去首页
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      //  表示：既有token  去的页面不是login====直接放行
      // 获取用户信息
      if (!store.state.user.userInfo.userId) {
        // 表示之前获取过用户信息,不需要再重新获取
        const {
          data: {
            roles: { menus }
          }
        } = await store.dispatch('user/getInfo')

        /*
        menus：['employees','settings']
        asyncRoutes:[{
              path: '/settings',
              component: Layout,
              children: [{
                path: '', // 作为默认渲染路由
                name: 'settings',
                component: () => import('@/views/settings/settings.vue'),
                meta: { title: '公司设置', icon: 'settings' }
              }]
            },{},{}....8个]
        ====最后的结果：[{
              path: '/settings',
              component: Layout,
              children: [{
                path: '', // 作为默认渲染路由
                name: 'settings',
                component: () => import('@/views/settings/settings.vue'),
                meta: { title: '公司设置', icon: 'settings' }
              }]
            },{
              path: '/employees',
              component: Layout,
              children: [{
                path: '', // 作为默认渲染路由
                name: 'employees',
                component: () => import('@/views/employees/employees.vue'),
                meta: { title: '公司员工', icon: 'employees' }
              }]
            }]

        */
        /* 筛选路由规则数据  */
        // 方法1:有bug,没有判断条件
        // var filterRoute = asyncRoutes.filter((item) => {
        //   var newArr = []
        //   menus.forEach((key) => {
        //     if (item.children[0].name === key) {
        //       newArr.push(item)
        //     }
        //   })
        //   return newArr
        // })

        // var filterRoute = []
        // asyncRoutes.forEach((item) => {
        //   menus.forEach((key) => {
        //     if (item.children[0].name === key) {
        //       filterRoute.push(item)
        //     }
        //   })

        // })

        // 方法2
        var filterRoute = asyncRoutes.filter((item) =>
          menus.includes(item.children[0].name)
        )
        // 解决404  因为路由规则中的path：*  在动态的前面所会先匹配，======将其移到动态路由规则的后面，将筛选出来动态数组.push({path:'*'})
        filterRoute.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoute) // 直接解决可以进行页面访问,但是不能控制菜单显示
        // console.log(menus, 9991)
        console.log(filterRoute, 113)
        /*
        最后一步：解决左侧菜单显示对应的权限
        sideBar中不使用this.$router.options.rotes====>filterRoute+静态路由规则
        */
        // 控制菜单显示
        store.commit('user/setRoute', filterRoute)
        next({
          path: to.path, // 指定要去的路径
          replace: true // 重进一次, 不保留重复历史===不加不会有问题
        }) // to:{path:''}
      }
      next()
      //  console.log(store,77788);
      // await store.dispatch('user/getInfo')
      // // 获取用户图像
      // await getUserDetailById(userId)
      // next()
      // 需要重新定义去哪里
      // next(to.path)
      // store.dispatch('user/getInfo').then(() => {
      //   next()
      // })

      // const hasGetUserInfo = store.getters.name
      // if (hasGetUserInfo) {
      //   next()
      // } else {
      //   try {
      //     // get user info
      //     await store.dispatch('user/getInfo')

      //     next()
      //   } catch (error) {
      //     // remove token and go to login page to re-login
      //     await store.dispatch('user/resetToken')
      //     Message.error(error || 'Has Error')
      //     next(`/login?redirect=${to.path}`)
      //     NProgress.done()
      //   }
      // }
    }
  } else {
    //  表示 没有token
    /* has no token*/
    // if (whiteList.indexOf(to.path) !== -1) {
    if (whiteList.includes(to.path)) {
      // 表示：当前要去的地址存在白名单中
      // if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // 表示：当前要去的地址不存在白名单中
      // other pages that do not have permission to access are redirected to the login page.
      // next(`/login?redirect=${to.path}`)
      next(`/login`)
      NProgress.done()
    }
  }
})
// 跳转后
router.afterEach(() => {
  console.log('跳转后')
  // finish progress bar
  NProgress.done()
})
